<template>
    <div>
        <bread :list="['日志管理', '异常日志']" />
        <div class="container">
            <div
                class="row mb-20 mt-20 items-center"
                style="gap: 10px; font-size: 14px; color: #606266"
                v-user="'/log/system/list'"
            >
                <div>
                    IP：
                    <el-input v-model="conf.query.ip" autocomplete="off" style="width: 150px" />
                </div>
                <div>
                    类型：
                    <el-select
                        v-model="conf.query.type"
                        clearable
                        class="m-2"
                        placeholder="Select"
                        size="large"
                        style="width: 150px"
                    >
                        <el-option
                            v-for="item in conf.list.type"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div>
                    状态码：
                    <el-select
                        v-model="conf.query.code"
                        clearable
                        class="m-2"
                        placeholder="Select"
                        size="large"
                        style="width: 150px"
                    >
                        <el-option
                            v-for="item in conf.list.code"
                            :key="item.value"
                            :label="`${item.value}-${item.label}`"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div>
                    内容：
                    <el-input v-model="conf.query.content" autocomplete="off" style="width: 150px" />
                </div>
                <div>
                    标题：
                    <el-input v-model="conf.query.title" autocomplete="off" style="width: 150px" />
                </div>

                <el-button type="primary" @click="search">搜索</el-button>
                <el-button type="warning" @click="resetQuery">重置</el-button>
                <el-button type="danger" @click="conf.deldialog.open" v-user="'/log/system/removeAll'">清空</el-button>
            </div>
            <el-table
                v-loading="conf.table.loading"
                :data="conf.table.data"
                border
                class="fz-14"
                ref="multipleTable"
                header-cell-class-name="table-header"
                row-key="id"
                v-model:default-expand-all="conf.table.expandall"
                empty-text="暂无数据"
                :highlight-current-row="true"
            >
                <el-table-column prop="title" label="标题" width="180"></el-table-column>
                <el-table-column prop="ip" label="IP" width="160"></el-table-column>
                <el-table-column prop="code" label="状态码" width="80"></el-table-column>
                <el-table-column prop="type" label="类型" width="100"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                <el-table-column label="内容" align="left">
                    <template #default="{ row }">
                        <div class="ellipsis">{{ row.content }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="{ row }">
                        <el-button link type="warning" @click="showDetail(row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="row justify-end mt-20 mb-20">
                <el-pagination
                    v-model:current-page="conf.table.page.pageNum"
                    :page-size="conf.table.page.pageSize"
                    :pager-count="7"
                    layout="prev, pager, next"
                    :total="conf.table.page.total"
                    @current-change="getTableData"
                    v-if="conf.table.page.total > conf.table.page.pageSize"
                />
            </div>
        </div>

        <el-dialog v-model="conf.dialog.show" :title="conf.dialog.title" :close-on-click-modal="false">
            <div class="column" style="gap: 15px">
                <div class="row">
                    <div style="font-weight: bold">标题：</div>
                    <div>{{ conf.dialog.item.title }}</div>
                </div>
                <div class="row" style="gap: 5px">
                    <div style="font-weight: bold">内容：</div>
                    <div
                        style="width: 610px; max-height: 500px; overflow: auto; padding: 5px; border: 2px solid #f37e7e"
                    >
                        {{ conf.dialog.item.content }}
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="conf.dialog.show = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="conf.deldialog.show" :title="conf.deldialog.title" :close-on-click-modal="false">
            <div class="column" style="gap: 15px">
                <div class="row items-center">
                    <div style="font-weight: bold; width: 60px">类别：</div>
                    <el-radio-group v-model="conf.deldialog.form.type">
                        <el-radio-button label="type">类型</el-radio-button>
                        <el-radio-button label="code">状态码</el-radio-button>
                        <el-radio-button label="all">所有</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="row items-center" v-if="conf.deldialog.form.type !== 'all'">
                    <div style="font-weight: bold; width: 60px">值：</div>
                    <el-select
                        v-model="conf.deldialog.form.value.type"
                        v-if="conf.deldialog.form.type == 'type'"
                        clearable
                        class="m-2"
                        placeholder="Select"
                        size="large"
                        style="width: 190px"
                    >
                        <el-option
                            v-for="item in conf.list.type"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <el-select
                        v-model="conf.deldialog.form.value.code"
                        v-if="conf.deldialog.form.type == 'code'"
                        clearable
                        class="m-2"
                        placeholder="Select"
                        size="large"
                        style="width: 190px"
                    >
                        <el-option
                            v-for="item in conf.list.code"
                            :key="item.value"
                            :label="`${item.value}-${item.label}`"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="conf.deldialog.show = false">关闭</el-button>
                    <el-button type="primary" @click="conf.deldialog.sub" :loading="conf.deldialog.loading">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { index } from '.'

const { conf, getTableData, resetQuery, showDetail, search } = index()
</script>

<style lang="less" scoped></style>
